<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Default</title>
    <script src="/js/jquery.min.js"></script>
    <!--<script src="/js/config/server.js"></script>-->
    <!--<script src="/js/common/login.js"></script>-->
    <script src="/js/echarts.v4.0.4.min.js"></script>
</head>
<body>
<div id="main" style="width: 1400px;height:1300px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var app = echarts.init(document.getElementById('main'));

  app.title = '嵌套环形图';

  option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      data:['起点','提交审核','审核通过','审核未过','课题已被选','暂无学生选题',
        '提交开题报告材料','开题审核通过','开题审核未过','提交一稿材料','一稿审核通过','一稿审核未过',
        '提交二稿材料','二稿审核通过','二稿审核未过','提交三稿材料','三稿审核通过','三稿审核未过',
        '一辩未过','一辩通过','二辩未过','二辩通过', '三辩未过', '三辩通过']
    },
    series: [
      {
        name:'访问来源',
        type:'pie',
        selectedMode: 'single',
        radius: [0, '30%'],

        label: {
          normal: {
            position: 'inner'
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        }
      },
      {
        name:'答辩流程进度',
        type:'pie',
        radius: ['40%', '55%'],
        label: {
          normal: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            backgroundColor: '#eee',
            borderColor: '#aaa',
            borderWidth: 1,
            borderRadius: 4,
            // shadowBlur:3,
            // shadowOffsetX: 2,
            // shadowOffsetY: 2,
            // shadowColor: '#999',
            // padding: [0, 7],
            rich: {
              a: {
                color: '#999',
                lineHeight: 22,
                align: 'center'
              },
              // abg: {
              //     backgroundColor: '#333',
              //     width: '100%',
              //     align: 'right',
              //     height: 22,
              //     borderRadius: [4, 4, 0, 0]
              // },
              hr: {
                borderColor: '#aaa',
                width: '100%',
                borderWidth: 0.5,
                height: 0
              },
              b: {
                fontSize: 16,
                lineHeight: 33
              },
              per: {
                color: '#eee',
                backgroundColor: '#334455',
                padding: [2, 4],
                borderRadius: 2
              }
            }
          }
        },
        data:[
          {value:335, name:'起点'},
          {value:310, name:'提交审核'},
          {value:234, name:'审核通过'},
          {value:135, name:'审核未过'},
          {value:33, name:'课题已被选'},
          {value:111, name:'暂无学生选题'},

          {value:111, name:'提交开题报告材料'},
          {value:111, name:'开题审核通过'},
          {value:111, name:'开题审核未过'},
          {value:111, name:'提交一稿材料'},
          {value:111, name:'一稿审核通过'},
          {value:111, name:'一稿审核未过'},
          {value:111, name:'提交二稿材料'},
          {value:111, name:'二稿审核通过'},
          {value:111, name:'二稿审核未过'},
          {value:111, name:'提交三稿材料'},
          {value:111, name:'三稿审核通过'},
          {value:111, name:'三稿审核未过'},


          {value:147, name:'一辩未过'},
          {value:102, name:'一辩通过'},
          {value:102, name:'二辩未过'},
          {value:102, name:'二辩通过'},
          {value:102, name:'三辩未过'},
          {value:102, name:'三辩通过'}
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  app.setOption(option);

</script>
<!--<button onclick="listAll()"> click88888888888888888 </button>-->
<script>
function listAll() {
  handlerGet('/rest/topic/listAll', 'admin', function (data) {
    console.log(data)
  }, function (data) {

  })
}
</script>

</body>
</html>